<template>
    <a-form-item :label="model.title" :extra="model.extra"
                 :label-col="model.labelCol" :wrapper-col="model.wrapperCol" :name="meta.id">
      <a-input v-if="'text' == getType()" v-model:value="editModel[meta.id]" :placeholder="model.placeholder"
               :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled">
      </a-input>
      <a-tree v-else-if="'tree' == getType()" :disabled="model.disabled"
              :replaceFields="{title: 'label', key: 'value'}" :treeData="model.options"
              :checkable="model.checkable" v-model:value="editModel[meta.id]" />
      <a-rate v-else-if="'rate' == getType()" :disabled="model.disabled"
              :allowHalf="model.allowHalf" :count="model.count" v-model:value="editModel[meta.id]" />
      <a-slider v-else-if="'slider' == getType()" :disabled="model.disabled"
                v-model:value="editModel[meta.id]" :min="model.min" :max="model.max"
                :step="model.step" :marks="model.marks" :range="model.range" />
      <a-switch v-else-if="'switch' == getType()" :checkedChildren="model['checkedChildren']"
                :disabled="model.disabled" v-model:value="editModel[meta.id]"
                :unCheckedChildren="model['unCheckedChildren']"/>
      <a-mentions v-else-if="'mentions' == getType()" :placeholder="model.placeholder"
                  :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                  :disabled="model.disabled" :prefix="model.prefix" :split="model.split" v-model:value="editModel[meta.id]">
        <a-mentions-option v-for="item in model.options" :key="item.value" :value="item.value">{{ item.label }}</a-mentions-option>
      </a-mentions>
      <a-auto-complete v-else-if="'complete' == getType()" :placeholder="model.placeholder"
                       :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                       :disabled="model.disabled" v-model:value="editModel[meta.id]"/>
      <a-select v-else-if="'select' == getType()" :placeholder="model.placeholder"
                :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                :mode="model.mode" v-model:value="editModel[meta.id]" :maxTagCount="model.maxTagCount"
                :showSearch="model.showSearch" :disabled="model.disabled" />
      <a-radio-group v-else-if="'radio' == getType()" :options="model.options"
                     :disabled="model.disabled" v-model:value="editModel[meta.id]" />
      <a-cascader v-else-if="'cascade' == getType()" :placeholder="model.placeholder"
                  :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                  :disabled="model.disabled" v-model:value="editModel[meta.id]" />
      <ivz-date-time v-else-if="'date' == getType()" :placeholder="model.placeholder"
                     :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled"
                     :type="model['dateType']" :format="model.format" :showTime="model.showTime"
                     :showToday="model.showToday" />
      <a-checkbox-group v-else-if="'checkbox' == getType()" :options="model.options" v-model:value="editModel[meta.id]" />
      <a-tree-select v-else-if="'stree' == getType()" :placeholder="model.placeholder"
                     :treeData="model.options" :allowClear="model.clear" :read-only="model.readonly"
                     :disabled="model.disabled" v-model:value="editModel[meta.id]" :multiple="model.multiple" />
      <a-input-number v-else-if="'number' == getType()" :placeholder="model.placeholder"
                      :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled"
                      :precision="model.precision" style="width: 100%" :min="model.min"
                      :max="model.max" :step="model.step" v-model:value="editModel[meta.id]" />
    </a-form-item>
</template>

<script>
import {IvzDateTime} from "@/components/functional";
import {mapGetters} from 'vuex'

export default {
  name: "IvzPreviewItem",
  components: {IvzDateTime},
  props: ["meta", "editModel"],
  computed: {
    ...mapGetters(['editTabModel']),
  },
  setup(props) {
    let model = props.meta['tabModel'];
    return {model}
  },
  methods: {
    getType() {
      let type = this.meta.type;
      if(type == 'foreign' || type == 'quote') {
        let target = this.meta.tabModel['target'];
        if(target) {
          this.model = target;
          return target['type'];
        } else {
          console.warn('请选择指定的外键或者引用');
        }
      }
      return type;
    }
  }
}
</script>

<style scoped>
.ivz-form-item {
  height: 68px;
  position: relative;
}
</style>
